<template>
  <div class="wrap">
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:3.1rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in shopInfo.images' class="swiper-slide index_swiper_listimg" :src="$store.state.imgurlApi+el">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <p class="back" @click="back"><img src="../../../static/img/fh932.png" alt=""></p>
    </div>
    <div class="cantuan">
      <p><span>￥</span>{{price}}</p>
      <p><img :src="sc?'../../../static/img/sc001ed.png':'../../../static/img/sc001.png'" alt="" @click="collection"><span>{{sc?'已收藏':'收藏商品'}}</span></p>
    </div>
    <!--  详情  -->
    <div class="infoWrap">
      <div class="infoName">
        <p>{{shopInfo.title}}</p>
      </div>
      <div class="infoDetails">{{shopInfo.subtitle}}</div>
    </div>
    <div class="fgx"></div>
    <!-- 规格选择  -->
    <div class="guige">
      <!-- 优惠券领取 -->
      <div class="gg_2" @click="getYHJ">
        <p>领劵</p>
        <div class="gg2_img"><p>满150减25</p><p>满50减5</p></div>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="ggShow">
        <p>已选</p>
        <p><span v-for="x in arr" style="color: #575757">{{x}}&nbsp;&nbsp;</span>&ensp;x&ensp;{{value}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="isShow('show1')">
        <p>配送</p>
        <p style="color: #575757">{{actions[sel1].name}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
    </div>
    <div class="fgx"></div>
    <!--  评论  -->
    <div class="commentWrap">
        <div class="comment-tit">
            <div><p></p><p>商品评价(26)</p></div>
            <p @click="jump('CommodityEvaluation')"><span>查看全部</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
        </div>
      <div class="empty" v-show="false">
        该店铺暂无评价
      </div>
        <div class="comment-box" >
            <div class="comment-box-top">
                <div class="comment-box-img">
                  <img src="../../../static/img/uhead.jpg" alt="">
                  <div class="comment-box-name">
                    <span>代码搬运工</span>
                    <div class="star">
                      <van-rate allow-half v-model="9.5/2" readonly color="#FF7005" />
                    </div>
                  </div>
                </div>
                <div class="comment-box-time">
                  <p>04-30 14:43</p>
                </div>
            </div>
            <div class="comment-box-info" @click="jump('CommentDetails')">
              这个蛋糕真的超级好吃，香甜细腻，这个味的真的不要太好
              吃！！一定要试试！！
            </div>
            <div class="comment-img" @click="jump('CommentDetails')">
              <img src="../../../static/img/es1.png" alt="">
              <img src="../../../static/img/es2.png" alt="">
              <img src="../../../static/img/es3.png" alt="">
            </div>
            <div class="comment-box-icon">
                <p>口味5星/包装5星/配送满意</p>
                <div>
                  <p @click="thisComment=!thisComment"><img :src="thisComment?'../../../static/img/tz1ed.png':'../../../static/img/tz1.png'" alt=""><span>356</span></p>
                  <p><img src="../../../static/img/tz2.png" alt=""><span>356</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="fgx"></div>
    <!--  宝贝详细信息  -->
    <div class="details">
      <div>宝贝详情</div>
      <div class="detailsInfo">
        <p>该商品暂无详情</p>
      </div>
    </div>

    <footer>
      <div class="foot_2" @click="toStore(shopInfo.store_id)">进入店铺</div>
      <div class="foot_3" @click="buyShop('order')">立即购买</div>
    </footer>

    <!--  选择支付  -->
    <van-popup v-model="look" class="fkPopup" :style="{maxHeight:$store.state.minHeight*.7+'rem'}">
      <div class="fkbox" >
        <div class="fktit">{{shopInfo.title}}</div>
        <div class="fkitem" v-for="(item1,y1) in Specifications">
          <p>{{item1.name}}</p>
          <div>
            <p v-for="(x,y) in item1.children" :class="x.name==arr[y1]?'selected':''" @click="selGG(y1,y,x.id)">
              {{x.name}}</p>
          </div>
        </div>
        <div class="fkNum">
          <p>数量</p>
          <van-stepper v-model="value" theme="round" button-size="22" min="1" max="99"  @change="selectNum" disable-input />
        </div>
        <div class="yxguige">
          <p>已选规格：</p>
          <p><span v-for="x in arr">{{x}}&nbsp;&nbsp;</span>&ensp;x&ensp;{{value}}</p>
        </div>
        <div class="guifoot">
          <p><span>￥</span>{{price}}</p>
          <p @click="closeGuiGe">确定</p>
        </div>
        <p style="height: .01rem;width:100%;"></p>
      </div>
    </van-popup>

    <!--  优惠券选择  -->
    <van-popup v-model="yhjShow" round position="bottom" :style="{ height: '55%' }">
      <div class="yhj_wrap">
        <div class="yhj_tit"><p>领取优惠券</p><img src="../../../static/img/closeTu.png" alt="" @click="yhjShow=false"></div>
        <div class="yhj_item_wrap">
          <div class="yhj_item" v-for="x in yhjList">
            <div class="yhj_item_left">
              <p><span>￥</span>{{x.money}}</p>
              <p>满{{x.m}}元可用</p>
            </div>
            <div class="yhj_item_right">
              <div class="yhj_item_rt_left">
                <p>{{x.money}}元代金券</p>
                <img src="../../../static/img/dianpuhongbao@2x.png" alt="">
                <p>{{x.time}}</p>
              </div>
              <p :class="x.usered?'yhj_item_btn usered':'yhj_item_btn'" @click="x.usered = true">
                {{x.usered?'立即使用':'立即领取'}}</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <van-action-sheet
      v-model="show1"
      :actions="actions"
      description="配送方式"
      @select="onSelect"
    />


  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import {ActionSheet, popup} from 'vant';

  Vue.use(ActionSheet);
  Vue.use(popup);

  export default {
    name: "shopDetails",
    data() {
      return {
        shopInfo:[], // 商品详情
        Specifications:[], // 商品规格
        arr: [], // 当前已选规格
        price:0, // 当前商品价格
        SpecificationsPrice:[], // 当前商品规格价格列表
        SpecificationsIndex:[], // 当前商品规格ID
        look: false,
        show1: false,
        sel1: 0,
        actions: [
          {name: '外卖配送',type:0},
          {name: '到店自取',type:1},
        ],
        showList: true,
        yhjShow: false,
        coupon:[], // 优惠券列表
        yhjList: [{money: 20, m: 50, time: '有效期至2020年5月30号', usered: false}, {
          money: 20,
          m: 50,
          time: '有效期至2020年5月30号',
          usered: true
        }, {money: 20, m: 50, time: '有效期至2020年5月30号', usered: true}],
        thisComment:false, // 当前是否点赞
        value:1, // 当前商品已选择数量
        sc:false, // 当前商品是否已收藏
      }
    },
    beforeCreate(){
      // 请求商品是否收藏
      this.$myAxios('index/Collect/collect_shop','post',{
        user_id:this.$myStorage.query(),
        goods_id:this.$route.query.id
      }).then(res=>{
        if (res.data.state == 1) {
          this.$nextTick(()=>{
            this.sc = true;
          })
        }
      })
    },
    created(){
      // 请求商品数据
      this.$myAxios('api/goods/detail','get',{
        goods_id:this.$route.query.id
      }).then(res=>{
        this.shopInfo = res.data.data.goods_info;
        this.Specifications = res.data.data.skuList;
        this.SpecificationsPrice = res.data.data.skuPrice;
        this.price = this.SpecificationsPrice[0].price * 1;
        this.SpecificationsIndex = this.SpecificationsPrice[0].goods_sku_ids.split(',');
        // 预定义规格选择
        for (var i of res.data.data.skuList) {
          this.arr.push(i.children[0].name)
        }
        console.log(this.Specifications);
      });
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项.
        observer:true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay:{
          delay:3000,
          disableOnInteraction: false
        }
      });
    },
    methods: {
      getYHJ(){
        this.yhjShow=false;
        this.$myNotice('暂未开放领取!',1500)
      },
      back() {
        this.$router.back();
      },
      jump(page) {
        this.$router.push({
          name: page
        })
      },
      toStore(id){
        this.$router.push({
          name: 'shopInfo/shopInfoShop',
          query:{id:id}
        })
      },
      closeGuiGe() {
        this.look = false;
      },
      ggShow() {
        this.look = true;
      },
      // 选择规格
      selGG(y1,y,id) {
        var arr = [...this.arr];
        arr[y1] = this.Specifications[y1].children[y].name;
        this.arr = arr;
        this.SpecificationsIndex[y1] = id;
        // 计算价格
        for (var i of this.SpecificationsPrice) {
          if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
            this.price = i.price*this.value;
            console.log('选择变了',this.price);
            break;
          }
        }
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show1 = false;
        this.sel1 = item.type;
      },
      isShow(res) {
        this[res] = true;
      },
      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
      },
      onExchange(code) {
        this.coupons.push(coupon);
      },
      // 数量变化
      selectNum(value){
        // 计算价格
        for (var i of this.SpecificationsPrice) {
          if (i.goods_sku_ids == this.SpecificationsIndex.join(',')) {
            this.price = i.price * this.value;
            console.log('数量变了',this.price);
            break;
          }
        }
      },
      // 收藏
      collection(){
        var type = '';
        if (this.sc) {
          // 取消收藏
          type = 'delete';
        }
        this.$myAxios('index/Collect/collect_shop_add','post',{
          user_id: this.$myStorage.query(),
          goods_id: this.$route.query.id,
          type_form:type
        }).then(res=>{
          if (res.data.state == 1 && type == 'delete') {
            this.sc = false;
            // 更新用户资料
            this.$store.commit('obtainUserInfo',this.$myStorage.query())
          }else if (res.data.state == 1 && type == '') {
            this.sc = true;
            // 更新用户资料
            this.$store.commit('obtainUserInfo',this.$myStorage.query())
          }else {
            this.$myNotice('请检查网络~',1500)
          }
        });
      },
      // 立即购买
      buyShop(page){
        var arr = [this.value,this.price];
        this.$router.push({
          name: page,
          query:{
            id:this.$route.query.id,
            data:JSON.stringify([{shop:this.shopInfo,gauge:this.SpecificationsIndex,arr:this.arr,num:arr}]),
            type:JSON.stringify(this.actions[this.sel1]),
          }
        })
      }
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #FFFFFF;
    min-height: 6.17rem;
    padding-bottom: .5rem;
  }

  .empty {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    text-align: center;
    font-family: PingFang SC;
    color: #999999;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }


  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

  .cantuan {
    width: 100%;
    height: .4rem;
    box-sizing: border-box;
    padding-left: .15rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    background-color: #FFFFFF;
  }


  .ct_left1 > span {
    font-size: .2rem;
  }


  .ct_left2 > p:nth-child(1) {
    margin-bottom: .05rem;
  }

  .ct_left2 > p:nth-child(1) > span:nth-child(1) {
    text-decoration: line-through;
  }

  .ct_left2 > p:nth-child(2) {
    width: .38rem;
    height: .17rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .02rem;
    color: #FF7611;
    font-size: .11rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .17rem;
  }


  .ct_right > p:nth-child(1) {
    color: #FF7611;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-bottom: .05rem;
  }


  .ct_right1 > p {
    width: .14rem;
    height: .14rem;
    background: rgba(255, 118, 17, 1);
    border-radius: .02rem;
    color: #ffffff;
    text-align: center;
    line-height: .14rem;
  }


  .infoWrap {
    width: 100%;
    /*max-height: .8rem;*/
    box-sizing: border-box;
    padding: 0 .15rem .1rem .15rem;
    background-color: #ffffff;
    margin-top: .05rem;
  }

  .infoName {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .03rem;
  }


  .infoName > p {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .infoDetails {
    width: 100%;
    box-sizing: border-box;
    padding-right: .2rem;
    font-size: .13rem;
    line-height: .19rem;
    color: #A7A7A7;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .fgx {
    width: 100%;
    height: .1rem;
    background-color: #F5F5F5;
  }

  /*  规格 */
  .guige {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 .15rem;
  }

  .guige > div {
    height: .5rem;
    border-bottom: .01rem solid #F8F8F8;
  }

  .guige > div:nth-last-child(1) {
    border: none;
  }

  .gg_1, .gg_2 {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .gg_1 > img:nth-child(1) {
    width: .6rem;
    height: .25rem;
    margin-right: .1rem;
  }

  .gg_1 > p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .gg_1 > img:nth-child(3), .gg_2 > img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }

  .gg_2 {
    color: #919191;
  }

  .gg_2 > p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
  }

  .gg_2 > p:nth-child(1) {
    margin-right: .15rem;
  }

  .gg2_img > p {
    height: .1rem;
    padding: .05rem .1rem;
    line-height: .1rem;
    font-size: .1rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    background-image: url("../../../static/img/youhuijuanbeijingtu.png");
    margin-right: .05rem;
    background-size: 100% 100%;
  }

  .gg2_img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }


  footer {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
  }

  .foot_2, .foot_3 {
    height: 100%;
    width: 50%;
    line-height: .5rem;
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
  }


  .foot_2 {
    background-color: #FFBF25;
  }

  .foot_3 {
    background-color: #FF7611;
  }

  .cantuan {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-right: .15rem;
  }
  .cantuan > p:nth-child(1) {
    font-size: .18rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #FA3C2A;
  }

  .cantuan > p:nth-child(1) > span, .cantuan > p:nth-child(2) > span {
    font-size: .1rem;
  }

  .cantuan > p:nth-child(2) {
    width: .5rem;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
  .cantuan > p:nth-child(2)>img {
    width: .19rem;
    height: .18rem;
    margin-bottom: .02rem;
  }

  .ggfukuan {
    width: 100%;
    /*height: 6.67rem;*/
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .6);
  }



  .fktit {
    width: 100%;
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fkitem {
    margin-bottom: .1rem;
  }

  .fkitem > div {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }
  .fkitem > div::after{
    content: '';
    width: .8rem;
  }


  .fkitem > div > p {
    width: .8rem;
    height: .36rem;
    background: rgba(241, 241, 241, 1);
    border: .01rem solid #F1F1F1;
    border-radius: .07rem;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #666666;
    text-align: center;
    line-height: .36rem;
    margin-bottom: .05rem;
  }

  .yxguige {
    height: .4rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FAFAFA;
  }

  .yxguige > p:nth-child(1) {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yxguige > p:nth-child(2) {
    color: #333333;
  }

  .guifoot {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .guifoot > p:nth-child(1) {
    font-size: .24rem;
    font-family: San Francisco Display;
    font-weight: 500;
    color: #FF433C;
  }

  .guifoot > p:nth-child(1) > span {
    font-size: .16rem;
  }

  .guifoot > p:nth-child(2) {
    width: 1.08rem;
    height: .35rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .17rem;
    line-height: .35rem;
    text-align: center;
    color: #ffffff;
    font-size: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
  }

  .closeGuiGe {
    width: .38rem;
    height: .38rem;
    position: absolute;
    left: calc(50% - .19rem);
    bottom: -.52rem;
  }

  .selected {
    background: rgba(255, 239, 220, 1) !important;
    border: .01rem solid rgba(255, 118, 17, 1) !important;
    color: #FF7611 !important;
  }

  /* 弹出框 */
  >>> .van-action-sheet__description {
    padding: .16rem;
    color: #333333;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: .2rem;
  }

  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .18rem;
    line-height: .5rem;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: .2rem;
  }

  >>> .van-popup {
    min-height: 2rem;
  }

  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }

  >>> .van-action-sheet__item {
    height: .5rem;
  }
  >>> .fkPopup{
    transform: translate3d(0,0,0);
    top: 15% !important;
    left: calc(50% - 1.65rem) !important;
    border-radius: .06rem;
  }


  .yhj_wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .3rem .15rem;
    background-color: #F5F5F5;
  }

  .yhj_tit {
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    margin-bottom: .15rem;
  }

  .yhj_tit > p {
    width: 100%;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }

  .yhj_tit > img {
    width: .26rem;
    height: .26rem;
    position: absolute;
    right: 0;
  }

  .yhj_item_wrap {
    width: 100%;
    height: 2.5rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .yhj_item {
    width: 100%;
    height: 1.05rem;
    background-image: url("../../../static/img/youhuiquanbj1111.png");
    background-size: 100% 100%;
    margin-bottom: .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .yhj_item_left {
    width: 28%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .yhj_item_left > p:nth-child(1) {
    font-size: .36rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FF002A;
  }

  .yhj_item_left > p:nth-child(1) > span {
    font-size: .24rem;
  }

  .yhj_item_left > p:nth-child(2) {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yhj_item_right {
    width: 71%;
    height: 100%;
    box-sizing: border-box;
    padding-left: .1rem;
    padding-right: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .yhj_item_rt_left > p:nth-child(1) {
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #323134;
  }

  .yhj_item_rt_left > img:nth-child(2) {
    width: .45rem;
    margin: .05rem 0;
  }

  .yhj_item_rt_left > p:nth-child(3) {
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #CCCCCC;
  }

  .yhj_item_btn {
    width: .7rem;
    height: .27rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .13rem;
    text-align: center;
    line-height: .27rem;
    font-size: .1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .usered {
    background: none !important;
    box-shadow: none !important;
    border: .01rem solid rgba(255, 112, 4, 1);
    color: #FF6F02;
  }


  .back {
    width: .35rem;
    height: .35rem;
    position: fixed;
    top: .15rem;
    left: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .back > img {
    width: .3rem;
  }

  /* 轮播图小圆点颜色改变 */
  >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: rgba(252, 216, 144, .68) !important;
  }


  .commentWrap {
    background-color: #FFFFFF;
    padding: 0 .15rem;
  }
  .comment-tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-tit>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-tit>div>p:nth-child(1) {
    width:.04rem;
    height:.17rem;
    background:rgba(255,149,71,1);
    border-radius: .02rem;
    margin-right: .1rem;
  }
  .comment-tit>div>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #232323;
  }
  .comment-tit>p>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-tit>p>img {
    width: .06rem;
    height: .11rem;
    margin-left: .08rem;
  }

  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .15rem;
  }

  .comment-box-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-img>img {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    margin-right: .13rem;
  }
  .comment-box-name {
    height: .35rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-name>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #4E4E4E;
  }
  .comment-box-name>.star {
    margin: 0;
  }
  .comment-box-time {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-time>p {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-info {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(98,98,98,1);
    line-height:.2rem;
    margin: .15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .comment-img {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .comment-img>img {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .05rem;
    margin-bottom: .05rem;
  }
  .comment-box-icon {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-icon>p:nth-child(1) {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-icon>div>p {
    padding: 0 .1rem;
    height:.22rem;
    background:rgba(255,255,255,1);
    border:.01rem solid rgba(204, 204, 204, 1);
    border-radius:.11rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-left: .1rem;
  }
  .comment-box-icon>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-icon>div>p>span {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .comment-box-icon>div>p>img {
    width: .13rem;
    height: .13rem;
    margin-right: .05rem;
  }

  /* 评分适配 */
  >>> .van-rate__icon {
    font-size: .1rem;
  }
  >>> .van-rate__item:not(:last-child) {
    padding-right: .04rem;
  }

  /* 宝贝详情 */
  .details {
    background-color: #FFFFFF;
  }
  .details>div:nth-child(1) {
    width: .6rem;
    margin: 0 auto;
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    position: relative;
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .details>div:nth-child(1):before{
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    left:-.55rem;
  }
  .details>div:nth-child(1):after {
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    right: -.55rem;
  }

  .detailsInfo{
    text-align: center;
  }
  .detailsInfo>p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    height: .3rem;
    line-height: .3rem;
  }


  .fkNum {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .fkNum>p {
    margin: 0 !important;
  }

  .fkitem > p,.fkNum>p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #242424;
    margin-bottom: .1rem;
  }

  .fkbox {
    width: 3.26rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .1rem .2rem;
    position: relative;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
  /* 加减数量适配 */
  >>> .van-stepper__minus,>>> .van-stepper__plus {
    width: .22rem !important;
    height: .22rem !important;
    padding: .04rem;
  }
  >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper--round .van-stepper__plus {
    background-color: #FF7611;
  }
  >>> .van-stepper__minus::after {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__plus::after {
    width: .01rem;
    height: .13rem;
  }
  >>> .van-stepper__input {
    border-width: .01rem 0;
    margin: 0 .02rem;
    font-size: .14rem;
    width: .32rem;
    height: .22rem !important;
  }
</style>
